<!DOCTYPE html>
<html>
	<head>
		<title>权限分配</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/axios.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style>
			body,
			.el-tree {
				background-color: #eee;
			}

			.el-tree-node {
				margin: 0.15em 0 !important;
			}

			/* 悬浮时颜色更深一点 */
			.el-tree-node__content:hover {
				background-color: #CFE8FC !important;
			}
		</style>
	</head>
	<body>
		<div class="vue-box sbot" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<!-- 表格 -->
				<div style="padding: 1em 2em;">
					<el-form>
						<div class="c-title">所有权限</div>
						<!-- 此扩展能递归渲染一个权限树，点击深层次节点，父级节点中没有被选中的节点会被自动选中，单独点击父节点，子节点会全部 选中/去选中 -->
						<el-tree ref="tree" :data="dataList" show-checkbox node-key="id" :default-expand-all="true"
							:default-checked-keys="selectList" :expand-on-click-node="false" :check-on-click-node="true"
							:check-strictly="true">
							<span class="custom-tree-node" slot-scope="s">
								<span style="color: #2D8CF0;" v-if="s.data.status == true">{{ s.data.name }}</span>
								<span style="color: #999;" v-if="s.data.status == false">{{ s.data.name }} (隐藏)</span>
								<span style="color: #999;" v-if="s.data.remark">&emsp;———— {{s.data.remark}} </span>
							</span>
						</el-tree>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button size="mini" type="success" @click="checkedAll()">全选</el-button>
				<el-button size="mini" type="primary" @click="ok()">确定</el-button>
				<el-button size="mini" @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</div>
		<script src="../../sa-resources/menu-list.js"></script>
		<script src="../../sa-resources/index/admin-util.js"></script>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var role_id = sa.p('role_id');
			var app = new Vue({
				el: '.vue-box',
				data: {
					id: parseInt(sa.p('id', 0)),
					dataList: [], // 数据集合
					selectList: [], // 默认选中
					ywList: [], // 一维数组
					apiList: [], // 接口数据集合
				},
				created: function() {
					axiosConfig(axios)

					let loading = elLoadding({
						that: this
					})

					// 功能列表
					let url = getUrl('pub-function', 'list')
					let http = getHttp(axios, 'pub-function', 'list')
					let queryParams = []
					http(url, {
							params: {
								isPage: false,
								params: JSON.stringify(queryParams)
							}
						}).then(res => {
							this.ywList = res.list ? res.list : []; // 数据
							this.ywList = JSON.stringify(this.ywList)
							this.ywList = JSON.parse(this.ywList)

							this.dataList = res.list ? res.list : []; // 数据
							this.dataList = listToMenu(this.dataList)

							// 菜单ID组
							let menuIds = []
							this.ywList.forEach(item => {
								menuIds.push(item.id)
							})

							// 获取菜单接口
							url = getUrl('pub-api', 'list')
							http = getHttp(axios, 'pub-api', 'list')
							queryParams = [{
								left: 'functionId',
								op: 'in',
								right: menuIds
							}]
							http(url, {
									params: {
										isPage: false,
										params: JSON.stringify(queryParams)
									}
								}).then(res => {
									this.apiList = res.list ? res.list : []; // 数据
									let menuApis = {}
									this.apiList.forEach(api => {
										api['cfg_type'] = 'api'

										if (menuApis[api.functionId] instanceof Array) {
											menuApis[api.functionId].push(api)
										} else {
											menuApis[api.functionId] = [api]
										}
									})

									for (let key in menuApis) {
										this.$refs.tree.updateKeyChildren(key, menuApis[key])
										this.$refs.tree.setCheckedKeys(this.selectList)
									}

									loading.close()
								})
								.catch((err) => {
									sa.error(err.msg)
									loading.close()
								});
						})
						.catch((err) => {
							sa.error(err.msg)
							loading.close()
						});

					url = getUrl('auth', 'roleGetSimple', [this.id])
					http = getHttp(axios, 'auth', 'roleGetSimple')
					http(url, {}).then(res => {
							if (res.functions) {
								res.functions.forEach(t => {
									this.selectList.push(t.functionId)
								})
							}

							if (res.apis) {
								res.apis.forEach(t => {
									this.selectList.push(t.apid)
								})
							}
							this.$refs.tree.setCheckedKeys(this.selectList)

							loading.close();
						})
						.catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
				},
				methods: {
					// 保存
					ok: function() {
						let items = this.$refs.tree.getCheckedNodes()

						let apis = []
						let menus = []
						items.forEach(item => {
							if (item['cfg_type'] == 'api') {
								apis.push({
									roleId: this.id,
									apid: item.id
								})
							} else {
								menus.push({
									roleId: this.id,
									functionId: item.id
								})
							}
						})

						let loading = elLoadding({
							that: this
						})
						let params = {
							functions: menus,
							apis: apis
						}
						let url = getUrl('auth', 'roleCreate', [this.id])
						let http = getHttp(axios, 'auth', 'roleCreate')
						http(url, params).then(res => {
								sa.ok('权限已分配')

								setTimeout(() => {
									sa.closeCurrIframe();
								}, 1500)

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								sa.error(err.msg);
								loading.close();
							});
					},

					// 全选/ 取消全选
					checkedAll: function() {
						if (this.$refs.tree.getCheckedKeys().length != this.ywList.length) {
							this.$refs['tree'].setCheckedNodes(this.ywList);
						} else {
							this.$refs['tree'].setCheckedNodes([]);
						}
					}
				},

			})
		</script>
	</body>
</html>
